vue 实现文件上传、下载的方法

您所在的位置：网站首页 › vue 上传文件拦截器 › vue 实现文件上传、下载的方法

vue 实现文件上传、下载的方法

#vue 实现文件上传、下载的方法| 来源: 网络整理| 查看: 265

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

下载

1. 第一种方式是前端创建超链接，通过a标签的链接向后端服务发get请求，接收后端的文件流

下载模板另一种情况是创建div标签，动态创建a标签：下载 function downloadExcel() { let a = document.createElement('a') a.href ="/user/downloadExcel" a.click(); } 还有一种补充： function downloadExcel() { window.location.href = "/tUserHyRights/downloadUsersUrl"; } 复制代码

2. 通过创建iframe的方式

导出 //method方法： handleExport(row) { var elemIF = document.createElement('iframe') elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') + '&category=' + row.category elemIF.style.display = 'none' document.body.appendChild(elemIF) } 复制代码

3. 向后端发的post请求，使用blob格式

var _this = this const _searchForm = this.$refs.searchForm.searchForm axios({ //该请求根据自己项目自己调整 method: 'get', url: _this.baseUrl + 'prism/satisfaction/downloadTemplate', responseType: 'blob', params: { brand: 'xx', currentDate: _searchForm.currentDate, type: _searchForm.type, category: _searchForm.category }, headers: { 'data-type': 'Buffer', 'Content-Type': 'application/x-www-form-urlencoded;', 'token': getToken() } }).then(res => { const url = window.URL.createObjectURL(new Blob([res.data])) const link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', 'all_sample_fa_kegg_blast_bst.xls') // 指定下载后的文件名，防跳转 document.body.appendChild(link) link.click() }) 复制代码上传

1. input方式

vue中的文件上传主要分为两步：前台获取到文件和提交到后台。

（1）前台获取文件，主要是采用input框来实现。

开始上传复制代码

通过file类型的input框实现文件上传；然后通过设置multiple="multiplt"实现了多文件上传，并且使用accept实现了上传文件类型限制；最后通过监听change事件，前台获取到上传的文件。

getFile(event){ var file = event.target.files; for(var i = 0;i 只能上传excel文件，且不超过5MB {{fileName}} 取消确定复制代码

上传之前比较文件大小。

beforeUpload(file){ this.files = file; const extension = file.name.split('.')[1] === 'xls' const extension2 = file.name.split('.')[1] === 'xlsx' const isLt2M = file.size / 1024 / 1024 < 5 if (!extension && !extension2) { this.$message.warning('上传模板只能是 xls、xlsx格式!') return } if (!isLt2M) { this.$message.warning('上传模板大小不能超过 5MB!') return } this.fileName = file.name; return false // 返回false不会自动上传 }, 复制代码

手动上传确认提交。

submitUpload() { debugger console.log('上传'+this.files.name) if(this.fileName == ""){ this.$message.warning('请选择要上传的文件！') return false } let fileFormData = new FormData(); fileFormData.append('file', this.files, this.fileName);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 let requestConfig = { headers: { 'Content-Type': 'multipart/form-data' }, } this.$http.post(`/basedata/oesmembers/upload?companyId=`+this.company, fileFormData, requestConfig).then((res) => { debugger if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.visible = false this.$emit('refreshDataList') } }) } else { this.$message.error(data.msg) } }) } 复制代码

【本文地址】

vue 实现文件上传、下载的方法

vue 实现文件上传、下载的方法

今日新闻

推荐新闻